{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 57,
   "metadata": {},
   "outputs": [],
   "source": [
    "from pyecharts import Geo\n",
    "from pyecharts import Map\n",
    "from pyecharts import Bar,Line,Overlap\n",
    "import charts"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 25,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[('北京', 6.3), ('重庆', 25), ('上海', 0), ('天津', 5.5), ('河南', 98.3), ('广东', 75.8), ('山东', 59.2), ('安徽', 49.9), ('四川', 62), ('江苏', 33.1), ('河北', 48.6), ('湖北', 37.4), ('陕西', 31.9), ('湖南', 45.1), ('山西', 30.5), ('浙江', 30.6), ('甘肃', 27.3), ('广西', 40), ('江西', 38), ('福建', 20.0), ('辽宁', 18.5), ('贵州', 44), ('云南', 30), ('黑龙江', 19.0), ('内蒙古', 0), ('吉林', 15.0), ('新疆', 20.7), ('宁夏', 6.95), ('海南', 5.88), ('青海', 0), ('西藏', 2.53)]\n"
     ]
    }
   ],
   "source": [
    "add =[\"北京\",\"重庆\",\"上海\",\"天津\",\"河南\",\"广东\",\"山东\",\"安徽\",\"四川\",\"江苏\",\"河北\",\"湖北\",\"陕西\",\"湖南\",\"山西\",\"浙江\",\"甘肃\",\"广西\",\"江西\",\"福建\",\"辽宁\",\"贵州\",\"云南\",\"黑龙江\",\"内蒙古\",\"吉林\",\"新疆\",\"宁夏\",\"海南\",\"青海\",\"西藏\"]\n",
    "num = [6.3,25,0,5.5,98.3,75.8,59.2,49.9,62,33.1,48.6,37.4,31.9,45.1,30.5,30.6,27.3,40,38,20.0,18.5,44,30,19.0,0,15.0,20.7,6.95,5.88,0,2.53]\n",
    "# print(add)\n",
    "# print(num)\n",
    "dict_data = dict(zip(add,num))\n",
    "data = [tuple(i) for i in zip(add,num)]\n",
    "print(data)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 29,
   "metadata": {
    "scrolled": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts': '/nbextensions/echarts/echarts.min', 'china': '/nbextensions/echarts-countries-js/china'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "    <div id=\"4aa81cd99a074d23a0bd49ffdf925c92\" style=\"width:1000px;height:600px;\"></div>\n",
       "\n",
       "\n",
       "<script>\n",
       "    require(['echarts', 'china'], function(echarts) {\n",
       "        \n",
       "var myChart_4aa81cd99a074d23a0bd49ffdf925c92 = echarts.init(document.getElementById('4aa81cd99a074d23a0bd49ffdf925c92'), null, {renderer: 'canvas'});\n",
       "var option_4aa81cd99a074d23a0bd49ffdf925c92 = {\n",
       "    \"backgroundColor\": \"#404a59\",\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"orient\": \"horizontal\",\n",
       "            \"left\": \"center\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 12,\n",
       "                \"color\": \"#333\"\n",
       "            },\n",
       "            \"selectedMode\": \"multiple\",\n",
       "            \"show\": true,\n",
       "            \"data\": [\n",
       "                \"\"\n",
       "            ],\n",
       "            \"top\": \"top\"\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"formatter\": null,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14,\n",
       "            \"color\": \"#fff\"\n",
       "        },\n",
       "        \"borderColor\": \"#333\",\n",
       "        \"backgroundColor\": \"rgba(50,50,50,0.7)\"\n",
       "    },\n",
       "    \"series_id\": 1596344,\n",
       "    \"visualMap\": {\n",
       "        \"type\": \"continuous\",\n",
       "        \"max\": 80,\n",
       "        \"left\": \"left\",\n",
       "        \"min\": 0,\n",
       "        \"textStyle\": {\n",
       "            \"color\": \"#fff\"\n",
       "        },\n",
       "        \"splitNumber\": 5,\n",
       "        \"dimension\": null,\n",
       "        \"top\": \"bottom\",\n",
       "        \"inRange\": {\n",
       "            \"color\": [\n",
       "                \"#50a3ba\",\n",
       "                \"#eac763\",\n",
       "                \"#d94e5d\"\n",
       "            ]\n",
       "        },\n",
       "        \"calculable\": true,\n",
       "        \"showLabel\": true,\n",
       "        \"text\": [\n",
       "            \"high\",\n",
       "            \"low\"\n",
       "        ],\n",
       "        \"orient\": \"vertical\"\n",
       "    },\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\",\n",
       "        \"#f6f5ec\"\n",
       "    ],\n",
       "    \"toolbox\": {\n",
       "        \"feature\": {\n",
       "            \"saveAsImage\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"\\u4e0b\\u8f7d\\u56fe\\u7247\"\n",
       "            },\n",
       "            \"restore\": {\n",
       "                \"show\": true\n",
       "            },\n",
       "            \"dataView\": {\n",
       "                \"show\": true\n",
       "            }\n",
       "        },\n",
       "        \"show\": true,\n",
       "        \"orient\": \"vertical\",\n",
       "        \"left\": \"95%\",\n",
       "        \"top\": \"center\"\n",
       "    },\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"subtextStyle\": {\n",
       "                \"fontSize\": 12,\n",
       "                \"color\": \"#aaa\"\n",
       "            },\n",
       "            \"left\": \"center\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 18,\n",
       "                \"color\": \"#fff\"\n",
       "            },\n",
       "            \"text\": \"\\u5404\\u7701\\u9ad8\\u8003\\u4eba\\u6570\\u5206\\u5e03\",\n",
       "            \"top\": \"auto\",\n",
       "            \"subtext\": \"data from : gaokao.eol.cn\"\n",
       "        }\n",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"mapType\": \"china\",\n",
       "            \"label\": {\n",
       "                \"emphasis\": {\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12,\n",
       "                        \"color\": \"#fff\"\n",
       "                    },\n",
       "                    \"position\": null,\n",
       "                    \"show\": true\n",
       "                },\n",
       "                \"normal\": {\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12,\n",
       "                        \"color\": \"#000\"\n",
       "                    },\n",
       "                    \"position\": \"top\",\n",
       "                    \"show\": false,\n",
       "                    \"formatter\": null\n",
       "                }\n",
       "            },\n",
       "            \"type\": \"map\",\n",
       "            \"data\": [\n",
       "                {\n",
       "                    \"value\": 6.3,\n",
       "                    \"name\": \"\\u5317\\u4eac\"\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 25,\n",
       "                    \"name\": \"\\u91cd\\u5e86\"\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 0,\n",
       "                    \"name\": \"\\u4e0a\\u6d77\"\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 5.5,\n",
       "                    \"name\": \"\\u5929\\u6d25\"\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 98.3,\n",
       "                    \"name\": \"\\u6cb3\\u5357\"\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 75.8,\n",
       "                    \"name\": \"\\u5e7f\\u4e1c\"\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 59.2,\n",
       "                    \"name\": \"\\u5c71\\u4e1c\"\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 49.9,\n",
       "                    \"name\": \"\\u5b89\\u5fbd\"\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 62,\n",
       "                    \"name\": \"\\u56db\\u5ddd\"\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 33.1,\n",
       "                    \"name\": \"\\u6c5f\\u82cf\"\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 48.6,\n",
       "                    \"name\": \"\\u6cb3\\u5317\"\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 37.4,\n",
       "                    \"name\": \"\\u6e56\\u5317\"\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 31.9,\n",
       "                    \"name\": \"\\u9655\\u897f\"\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 45.1,\n",
       "                    \"name\": \"\\u6e56\\u5357\"\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 30.5,\n",
       "                    \"name\": \"\\u5c71\\u897f\"\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 30.6,\n",
       "                    \"name\": \"\\u6d59\\u6c5f\"\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 27.3,\n",
       "                    \"name\": \"\\u7518\\u8083\"\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 40,\n",
       "                    \"name\": \"\\u5e7f\\u897f\"\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 38,\n",
       "                    \"name\": \"\\u6c5f\\u897f\"\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 20.0,\n",
       "                    \"name\": \"\\u798f\\u5efa\"\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 18.5,\n",
       "                    \"name\": \"\\u8fbd\\u5b81\"\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 44,\n",
       "                    \"name\": \"\\u8d35\\u5dde\"\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 30,\n",
       "                    \"name\": \"\\u4e91\\u5357\"\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 19.0,\n",
       "                    \"name\": \"\\u9ed1\\u9f99\\u6c5f\"\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 0,\n",
       "                    \"name\": \"\\u5185\\u8499\\u53e4\"\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 15.0,\n",
       "                    \"name\": \"\\u5409\\u6797\"\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 20.7,\n",
       "                    \"name\": \"\\u65b0\\u7586\"\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 6.95,\n",
       "                    \"name\": \"\\u5b81\\u590f\"\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 5.88,\n",
       "                    \"name\": \"\\u6d77\\u5357\"\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 0,\n",
       "                    \"name\": \"\\u9752\\u6d77\"\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 2.53,\n",
       "                    \"name\": \"\\u897f\\u85cf\"\n",
       "                }\n",
       "            ],\n",
       "            \"name\": \"\",\n",
       "            \"showLegendSymbol\": true,\n",
       "            \"roam\": true,\n",
       "            \"symbol\": \"circle\"\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "myChart_4aa81cd99a074d23a0bd49ffdf925c92.setOption(option_4aa81cd99a074d23a0bd49ffdf925c92);\n",
       "\n",
       "    });\n",
       "</script>\n"
      ],
      "text/plain": [
       "<pyecharts.charts.map.Map at 0x141078acc50>"
      ]
     },
     "execution_count": 29,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "data_pro = data\n",
    "\n",
    "geo = Map(\"各省高考人数分布\", \"data from : gaokao.eol.cn\", title_color=\"#fff\",  \n",
    "          title_pos=\"center\", width=1000,  \n",
    "          height=600, background_color='#404a59')  \n",
    "attr, value = geo.cast(data_pro)\n",
    "geo.add(\"\", attr, value, visual_range=[0, 80],maptype='china',visual_text_color=\"#fff\",  \n",
    "        symbol_size=10, is_visualmap=True)  \n",
    "geo.render(\"各省高考人数分布.html\")#生成html文件  \n",
    "geo#直接在notebook中显示  "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 70,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[375, 454, 510, 613, 729, 877, 950, 1010, 1050, 1020, 946, 933, 915, 912, 939, 942, 940, 940]\n",
      "[221, 268, 320, 382, 447, 504, 546, 566, 599, 629, 657, 675, 685, 694, 698, 700, 705, 700]\n",
      "[59, 59, 63, 62, 61, 57, 57, 56, 57, 62, 69, 72, 75, 76, 74.3, 74.3, 75, 74.46]\n"
     ]
    }
   ],
   "source": [
    "# 高考人数\n",
    "gaokao_num = [940,940,942,939,912,915,933,946,1020,1050,1010,950,877,729,613,510,454,375]\n",
    "gaokao_num.reverse()\n",
    "print(gaokao_num)\n",
    "# 录取人数\n",
    "luqu_num = [700,705,700,698,694,685,675,657,629,599,566,546,504,447,382,320,268,221]\n",
    "luqu_num.reverse()\n",
    "print(luqu_num)\n",
    "# 录取率\n",
    "luqu_lev= [74.46,75,74.3,74.3,76,75,72,69,62,57,56,57,57,61,62,63,59,59]\n",
    "luqu_lev.reverse()\n",
    "print(luqu_lev)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 72,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "['2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016']\n"
     ]
    },
    {
     "ename": "AssertionError",
     "evalue": "",
     "output_type": "error",
     "traceback": [
      "\u001b[1;31m---------------------------------------------------------------------------\u001b[0m",
      "\u001b[1;31mAssertionError\u001b[0m                            Traceback (most recent call last)",
      "\u001b[1;32m<ipython-input-72-38066f456d1b>\u001b[0m in \u001b[0;36m<module>\u001b[1;34m()\u001b[0m\n\u001b[0;32m      3\u001b[0m \u001b[0mprint\u001b[0m\u001b[1;33m(\u001b[0m\u001b[0mattr\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0;32m      4\u001b[0m \u001b[0mbar\u001b[0m \u001b[1;33m=\u001b[0m \u001b[0mBar\u001b[0m\u001b[1;33m(\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[1;32m----> 5\u001b[1;33m \u001b[0mbar\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0madd\u001b[0m\u001b[1;33m(\u001b[0m\u001b[1;34m\"高考人数(万人)\"\u001b[0m\u001b[1;33m,\u001b[0m \u001b[0mattr\u001b[0m\u001b[1;33m,\u001b[0m \u001b[0mgaokao_num\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0m\u001b[0;32m      6\u001b[0m \u001b[0mbar\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0madd\u001b[0m\u001b[1;33m(\u001b[0m\u001b[1;34m\"录取人数(万人)\"\u001b[0m\u001b[1;33m,\u001b[0m \u001b[0mattr\u001b[0m\u001b[1;33m,\u001b[0m \u001b[0mluqu_num\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0;32m      7\u001b[0m \u001b[0mline\u001b[0m \u001b[1;33m=\u001b[0m \u001b[0mLine\u001b[0m\u001b[1;33m(\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n",
      "\u001b[1;32mc:\\python35\\lib\\site-packages\\pyecharts\\charts\\bar.py\u001b[0m in \u001b[0;36madd\u001b[1;34m(self, *args, **kwargs)\u001b[0m\n\u001b[0;32m     16\u001b[0m \u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0;32m     17\u001b[0m     \u001b[1;32mdef\u001b[0m \u001b[0madd\u001b[0m\u001b[1;33m(\u001b[0m\u001b[0mself\u001b[0m\u001b[1;33m,\u001b[0m \u001b[1;33m*\u001b[0m\u001b[0margs\u001b[0m\u001b[1;33m,\u001b[0m \u001b[1;33m**\u001b[0m\u001b[0mkwargs\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m:\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[1;32m---> 18\u001b[1;33m         \u001b[0mself\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0m__add\u001b[0m\u001b[1;33m(\u001b[0m\u001b[1;33m*\u001b[0m\u001b[0margs\u001b[0m\u001b[1;33m,\u001b[0m \u001b[1;33m**\u001b[0m\u001b[0mkwargs\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0m\u001b[0;32m     19\u001b[0m \u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0;32m     20\u001b[0m     def __add(self, name, x_axis, y_axis,\n",
      "\u001b[1;32mc:\\python35\\lib\\site-packages\\pyecharts\\charts\\bar.py\u001b[0m in \u001b[0;36m__add\u001b[1;34m(self, name, x_axis, y_axis, is_stack, bar_category_gap, **kwargs)\u001b[0m\n\u001b[0;32m     34\u001b[0m         \u001b[1;33m:\u001b[0m\u001b[0mparam\u001b[0m \u001b[0mkwargs\u001b[0m\u001b[1;33m:\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0;32m     35\u001b[0m         \"\"\"\n\u001b[1;32m---> 36\u001b[1;33m         \u001b[1;32massert\u001b[0m \u001b[0mlen\u001b[0m\u001b[1;33m(\u001b[0m\u001b[0mx_axis\u001b[0m\u001b[1;33m)\u001b[0m \u001b[1;33m==\u001b[0m \u001b[0mlen\u001b[0m\u001b[1;33m(\u001b[0m\u001b[0my_axis\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0m\u001b[0;32m     37\u001b[0m         \u001b[0mkwargs\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0mupdate\u001b[0m\u001b[1;33m(\u001b[0m\u001b[0mx_axis\u001b[0m\u001b[1;33m=\u001b[0m\u001b[0mx_axis\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0;32m     38\u001b[0m         \u001b[0mchart\u001b[0m \u001b[1;33m=\u001b[0m \u001b[0mget_all_options\u001b[0m\u001b[1;33m(\u001b[0m\u001b[1;33m**\u001b[0m\u001b[0mkwargs\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n",
      "\u001b[1;31mAssertionError\u001b[0m: "
     ]
    }
   ],
   "source": [
    "# 年份\n",
    "attr = [\"{}\".format(i) for i in range(2000, 2018)]\n",
    "print(attr)\n",
    "bar = Bar()\n",
    "bar.add(\"高考人数(万人)\", attr, gaokao_num)\n",
    "bar.add(\"录取人数(万人)\", attr, luqu_num)\n",
    "line = Line()\n",
    "line.add('录取率',attr,luqu_lev,line_color='#90ed7d',line_width=4)\n",
    "ol = Overlap(\"近十年高考数据\")\n",
    "ol.add(bar)\n",
    "ol.add(line)\n",
    "ol.show_config()\n",
    "ol.render()\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 92,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<style>body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:#555;font-family:sans-serif}\n",
       "small{font-weight:400;display:block;font-size:14px}\n",
       "code{background-color:#d3d3d3;border-radius:3px;font-family:monospace;padding:0 .5em}\n",
       ".icon.-facebook:before,.icon.-linkedin:before,.icon.-pinterest:before,.icon.-twitter:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Post-Creator-Icons;font-style:normal;font-variant:normal;font-weight:400;line-height:1;speak:none;text-transform:none}\n",
       "@font-face{font-family:Post-Creator-Icons;src:url(fonts/Post-Creator-Icons.eot);src:url(fonts/Post-Creator-Icons.eot?#iefix) format('embedded-opentype'),url(fonts/Post-Creator-Icons.woff) format('woff'),url(fonts/Post-Creator-Icons.ttf) format('truetype'),url(fonts/Post-Creator-Icons.svg#Post-Creator-Icons) format('svg');font-weight:400;font-style:normal}\n",
       ".icon.-facebook:before{content:\"\\e001\"}\n",
       ".icon.-linkedin:before{content:\"\\e002\"}\n",
       ".icon.-pinterest:before{content:\"\\e003\"}\n",
       ".icon.-twitter:before{content:\"\\e004\"}\n",
       ".social-icons h4{display:inline-block;margin:20px 10px 0 0}\n",
       ".social-icons .icon{display:inline-block;margin:0 5px}\n",
       "body.modal-open{overflow:hidden}\n",
       ".jsoneditor table,.jsoneditor td,.jsoneditor td.tree,.jsoneditor tr{border:none;margin:0}</style>\n",
       "<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.default.min.css\"/>\n",
       "<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/4.2.0/jsoneditor.min.css\"/>\n",
       "\n",
       "<div class=\"container-fluid\">\n",
       "    <div class=\"row\">\n",
       "        <div class=\"col-sm-10\">\n",
       "            <input type=\"text\" id=\"variable-selector\">\n",
       "        </div>\n",
       "        <div class=\"col-sm-2\">\n",
       "            <button class=\"btn btn-default pull-right\" type=\"submit\" id=\"settings-button\">Settings</button>\n",
       "        </div>\n",
       "    </div>\n",
       "\n",
       "    <div class=\"row\">\n",
       "        <div class=\"collapse col-xs-12\" id=\"settings-collapse\">\n",
       "            <div class=\"panel panel-default\" style=\"margin-top: 20px\">\n",
       "                <div class=\"panel-heading\"><h3 class=\"panel-title\">Adjust chart settings</h3></div>\n",
       "                <div class=\"panel-body\">\n",
       "                    <div class=\"row\">\n",
       "                        <div id=\"jsoneditor\" class=\"col-md-12\" style=\"height: 350px\"></div>\n",
       "                    </div>\n",
       "                    <div class=\"row\" style=\"margin-top: 10px\">\n",
       "                        <div class=\"col-sm-4\">\n",
       "                            <button type=\"button\" class=\"btn btn-primary\" id=\"save-settings\">\n",
       "                                Apply changes\n",
       "                            </button>\n",
       "                        </div>\n",
       "                        <div class=\"col-sm-8 text-right \">\n",
       "                            <form class=\"form-inline\">\n",
       "                                <div class=\"form-group\">\n",
       "                                    <div class=\"input-group\">\n",
       "                                        <input type=\"text\" class=\"form-control\" id=\"options-input\"\n",
       "                                               placeholder=\"settings\" style=\"text-align: right\">\n",
       "                                        <div class=\"input-group-addon\"><strong>.json</strong></div>\n",
       "                                    </div>\n",
       "                                </div>\n",
       "                                <button type=\"submit\" class=\"btn btn-primary\" id=\"options-button\">Save</button>\n",
       "                            </form>\n",
       "\n",
       "                        </div>\n",
       "                    </div>\n",
       "                </div>\n",
       "            </div>\n",
       "        </div>\n",
       "    </div>\n",
       "\n",
       "    <div class=\"row\">\n",
       "        <div id=\"chart-container\" style=\"min-width: 310px;\"></div>\n",
       "    </div>\n",
       "</div>\n",
       "\n",
       "\n",
       "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js\"></script>\n",
       "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.18/require.min.js\"></script>\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "<script>(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require==\"function\"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error(\"Cannot find module '\"+o+\"'\");throw f.code=\"MODULE_NOT_FOUND\",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require==\"function\"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){\n",
       "//findIndex polyfill\n",
       "if (!Array.prototype.findIndex) {\n",
       "    Array.prototype.findIndex = function(predicate) {\n",
       "        if (this == null) {\n",
       "            throw new TypeError('Array.prototype.findIndex called on null or undefined');\n",
       "        }\n",
       "        if (typeof predicate !== 'function') {\n",
       "            throw new TypeError('predicate must be a function');\n",
       "        }\n",
       "        var list = Object(this);\n",
       "        var length = list.length >>> 0;\n",
       "        var thisArg = arguments[1];\n",
       "        var value;\n",
       "\n",
       "        for (var i = 0; i < length; i++) {\n",
       "            value = list[i];\n",
       "            if (predicate.call(thisArg, value, i, list)) {\n",
       "                return i;\n",
       "            }\n",
       "        }\n",
       "        return -1;\n",
       "    };\n",
       "}\n",
       "\n",
       "if (!Array.prototype.filter) {\n",
       "    Array.prototype.filter = function(fun/*, thisArg*/) {\n",
       "        'use strict';\n",
       "\n",
       "        if (this === void 0 || this === null) {\n",
       "            throw new TypeError();\n",
       "        }\n",
       "\n",
       "        var t = Object(this);\n",
       "        var len = t.length >>> 0;\n",
       "        if (typeof fun !== 'function') {\n",
       "            throw new TypeError();\n",
       "        }\n",
       "\n",
       "        var res = [];\n",
       "        var thisArg = arguments.length >= 2 ? arguments[1] : void 0;\n",
       "        for (var i = 0; i < len; i++) {\n",
       "            if (i in t) {\n",
       "                var val = t[i];\n",
       "\n",
       "                // NOTE: Technically this should Object.defineProperty at\n",
       "                //       the next index, as push can be affected by\n",
       "                //       properties on Object.prototype and Array.prototype.\n",
       "                //       But that method's new, and collisions should be\n",
       "                //       rare, so use the more-compatible alternative.\n",
       "                if (fun.call(thisArg, val, i, t)) {\n",
       "                    res.push(val);\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "\n",
       "        return res;\n",
       "    };\n",
       "}\n",
       "\n",
       "function guid() {\n",
       "    function s4() {\n",
       "        return Math.floor((1 + Math.random()) * 0x10000)\n",
       "            .toString(16)\n",
       "            .substring(1);\n",
       "    }\n",
       "    return s4() + s4() + '-' + s4() + '-' + s4() + '-' +\n",
       "        s4() + '-' + s4() + s4() + s4();\n",
       "}\n",
       "\n",
       "Array.prototype.equals = function (array) {\n",
       "    // if the other array is a false value, return\n",
       "    if (!array)\n",
       "        return false;\n",
       "\n",
       "    // compare lengths - can save a lot of time\n",
       "    if (this.length != array.length)\n",
       "        return false;\n",
       "\n",
       "    for (var i = 0, l = this.length; i < l; i++) {\n",
       "        // Check if we have nested arrays\n",
       "        if (this[i] instanceof Array && array[i] instanceof Array) {\n",
       "            // recurse into the nested arrays\n",
       "            if (!this[i].equals(array[i]))\n",
       "                return false;\n",
       "        }\n",
       "        else if (this[i] != array[i]) {\n",
       "            // Warning - two different object instances will never be equal: {x:20} != {x:20}\n",
       "            return false;\n",
       "        }\n",
       "    }\n",
       "    return true;\n",
       "};\n",
       "\n",
       "},{}]},{},[1]);\n",
       "</script>\n",
       "<script>(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require==\"function\"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error(\"Cannot find module '\"+o+\"'\");throw f.code=\"MODULE_NOT_FOUND\",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require==\"function\"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){\n",
       "\n",
       "\n",
       "requirejs.config({\n",
       "    \"paths\": {\n",
       "        \"highstock\": \"https://cdnjs.cloudflare.com/ajax/libs/highstock/2.1.5/highstock\",\n",
       "        \"export\": \"https://cdnjs.cloudflare.com/ajax/libs/highstock/2.1.5/modules/exporting\",\n",
       "        \"more\": \"https://cdnjs.cloudflare.com/ajax/libs/highstock/2.1.7/highcharts-more\",\n",
       "        \"jsoneditor\": \"https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/4.2.0/jsoneditor.min\",\n",
       "        \"selectize\": \"https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.min\",\n",
       "        \"jquery\": \"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min\"\n",
       "    },\n",
       "    \"shim\": {\n",
       "        \"export\": [\"highstock\"],\n",
       "        \"more\": [\"highstock\"]\n",
       "    }\n",
       "});\n",
       "\n",
       "//Define jquery here to use the pre-loaded version\n",
       "define('jquery', [], function() {\n",
       "    return jQuery;\n",
       "});\n",
       "\n",
       "},{}]},{},[1]);\n",
       "</script>\n",
       "<script>(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require==\"function\"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error(\"Cannot find module '\"+o+\"'\");throw f.code=\"MODULE_NOT_FOUND\",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require==\"function\"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){\n",
       "//Count the number of charts on the page\n",
       "if (window.counter == undefined) {\n",
       "    window.counter = 0;\n",
       "} else {\n",
       "    window.counter++;\n",
       "}\n",
       "\n",
       "requirejs([\n",
       "    'jquery',\n",
       "    'selectize',\n",
       "    'jsoneditor',\n",
       "    'highstock',\n",
       "    'export',\n",
       "    'more'\n",
       "], function ($, selectize, JSONEditor) {\n",
       "\n",
       "    function guid() {\n",
       "        function s4() {\n",
       "            return Math.floor((1 + Math.random()) * 0x10000)\n",
       "                .toString(16)\n",
       "                .substring(1);\n",
       "        }\n",
       "\n",
       "        return s4() + s4() + '-' + s4() + '-' + s4() + '-' +\n",
       "            s4() + '-' + s4() + s4() + s4();\n",
       "    }\n",
       "\n",
       "    var id = guid();\n",
       "    plot(id);\n",
       "\n",
       "    function plot(id) {\n",
       "        var series = [\n",
       "            {data: [1, 2, 4, 9], name: \"temperature 1\", display: true, color: '#2b908f'},\n",
       "            {data: [9, 4, 2, 1], name: \"temperature 2\", display: true},\n",
       "            {data: [0, 3, 5, 6], name: \"temperature 3\", display: false}\n",
       "        ];\n",
       "        var series = [{\"display\": true, \"type\": \"column\", \"data\": [375, 454, 510, 613, 729, 877, 950, 1010, 1050, 1020, 946, 933, 915, 912, 939, 942, 940, 940], \"name\": \"\\u9ad8\\u8003\\u4eba\\u6570\"}, {\"display\": true, \"type\": \"column\", \"data\": [221, 268, 320, 382, 447, 504, 546, 566, 599, 629, 657, 675, 685, 694, 698, 700, 705, 700], \"name\": \"\\u5f55\\u53d6\\u4eba\\u6570\"}]\n",
       "        var options = {};\n",
       "        var options = {\"scale\": 2, \"xAxis\": {\"categories\": [\"2000\", \"2001\", \"2002\", \"2003\", \"2004\", \"2005\", \"2006\", \"2007\", \"2008\", \"2009\", \"2010\", \"2011\", \"2012\", \"2013\", \"2014\", \"2015\", \"2016\", \"2017\"]}, \"type\": \"line\", \"subtitle\": {\"text\": \"Source: edu.sina.com.cn\"}, \"height\": 400, \"width\": \"auto\", \"chart\": {\"zoomType\": \"xy\", \"type\": \"line\"}, \"title\": {\"text\": \"2000-2017\\u5e74\\u9ad8\\u8003\\u6570\\u636e\"}, \"yAxis\": {\"title\": {\"text\": \"\\u4e07\\u4eba/\\u5e74\"}}}\n",
       "        var useHighStock = false;\n",
       "        var useHighStock = false\n",
       "        var save = 'app/chart.svg';\n",
       "        var save = false\n",
       "        var url = 'http://127.0.0.1:65079';\n",
       "        var url = \"http://127.0.0.1:51038/\"\n",
       "        var settingsFile = 'settings';\n",
       "        var settingsFile = \"settings\"\n",
       "        var scale = options.scale;\n",
       "\n",
       "        //Create different containers for the charts\n",
       "        var chartContainer = document.getElementById(\"chart-container\");\n",
       "        chartContainer.id = \"chart-container\" + id;\n",
       "        chartContainer.style.height = options.height.toString() + 'px';\n",
       "\n",
       "        if (options.width != 'auto') {\n",
       "            chartContainer.style.width = options.width.toString() + 'px';\n",
       "        }\n",
       "\n",
       "        var selector = $(\"#variable-selector\");\n",
       "        selector.attr('id', \"variable-selector\" + id);\n",
       "\n",
       "        var settings = $(\"#settings-collapse\");\n",
       "        settings.attr('id', \"settings-collapse\" + id);\n",
       "\n",
       "        var button = $(\"#settings-button\");\n",
       "        button.attr('id', \"settings-button\" + id);\n",
       "\n",
       "        var saveButton = $(\"#save-settings\");\n",
       "        saveButton.attr('id', \"save-settings\" + id);\n",
       "\n",
       "        var optionsInput = $(\"#options-input\");\n",
       "        optionsInput.attr('id', \"options-input\" + id);\n",
       "        optionsInput.val(settingsFile);\n",
       "\n",
       "        var optionsButton = $(\"#options-button\");\n",
       "        optionsButton.attr('id', \"options-button\" + id);\n",
       "\n",
       "        // create the editor\n",
       "        var editorContainer = document.getElementById(\"jsoneditor\");\n",
       "        editorContainer.id = \"jsoneditor\" + id;\n",
       "        var editor = new JSONEditor(editorContainer);\n",
       "\n",
       "        button.on('click', showSettings);\n",
       "        saveButton.on('click', applyOptions);\n",
       "        optionsButton.on('click', saveOptions);\n",
       "\n",
       "        function applyOptions() {\n",
       "            var newOptions = editor.get();\n",
       "            setOptions(newOptions);\n",
       "            settings.collapse('hide');\n",
       "        }\n",
       "\n",
       "        function saveOptions(event) {\n",
       "            event.preventDefault();\n",
       "\n",
       "            applyOptions();\n",
       "\n",
       "            var options = chart.options;\n",
       "            delete options.exporting;\n",
       "\n",
       "            var name = optionsInput.val() ? optionsInput.val() + '.json' : 'settings.json';\n",
       "\n",
       "            options['settingsFile'] = name;\n",
       "\n",
       "            $.ajax({\n",
       "                type: \"POST\",\n",
       "                url: url,\n",
       "                data: JSON.stringify({\n",
       "                    options: options,\n",
       "                    name: name\n",
       "                })\n",
       "            });\n",
       "        }\n",
       "\n",
       "        function showSettings() {\n",
       "            settings.collapse('toggle');\n",
       "        }\n",
       "\n",
       "        //Choose a chart type\n",
       "        var ChartType = useHighStock ? Highcharts.StockChart : Highcharts.Chart;\n",
       "\n",
       "        //Default highchart colors\n",
       "        var colors = ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9',\n",
       "            '#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1'];\n",
       "\n",
       "        series.map(function (serie, index) {\n",
       "            if (!serie.color) {\n",
       "                serie['color'] = colors[index % 10];\n",
       "            }\n",
       "\n",
       "            return serie;\n",
       "        });\n",
       "\n",
       "        //Get all the keys\n",
       "        var keys = [];\n",
       "        var initialKeys = [];\n",
       "        $.each(series, function (index, serie) {\n",
       "            keys.push({\n",
       "                display: serie.display,\n",
       "                value: serie.name,\n",
       "                text: serie.name\n",
       "            });\n",
       "\n",
       "            if (serie.display) {\n",
       "                initialKeys.push(serie.name)\n",
       "            }\n",
       "        });\n",
       "\n",
       "        selector.selectize({\n",
       "            plugins: ['remove_button', 'restore_on_backspace'],\n",
       "            delimiter: ',',\n",
       "            options: keys,\n",
       "            items: initialKeys,\n",
       "            onItemAdd: function (key) {\n",
       "                console.log('series added');\n",
       "                addSeries(key);\n",
       "                newChart(chart.options, renderedSeries);\n",
       "            },\n",
       "            onItemRemove: function (key) {\n",
       "                console.log('series removed');\n",
       "                deleteSeries(key);\n",
       "                newChart(chart.options, renderedSeries);\n",
       "            }\n",
       "        });\n",
       "\n",
       "        //Set initial chart options\n",
       "        var chartOptions;\n",
       "        if (typeof options.chart === \"undefined\") {\n",
       "            chartOptions = {renderTo: chartContainer.id};\n",
       "        } else {\n",
       "            chartOptions = $.extend(options[\"chart\"], {renderTo: chartContainer.id});\n",
       "        }\n",
       "\n",
       "        //Initial rendered series\n",
       "        var renderedSeries = [];\n",
       "        options = $.extend(options, {chart: chartOptions}, {series: renderedSeries});\n",
       "        var chart = new ChartType(options);\n",
       "\n",
       "        $.each(initialKeys, function (index, key) {\n",
       "            addSeries(key);\n",
       "        });\n",
       "\n",
       "        newChart(chart.options, renderedSeries);\n",
       "        editor.set(chart.options);\n",
       "\n",
       "        if (save) {\n",
       "            saveSVG(url, save)\n",
       "        }\n",
       "\n",
       "        function setOptions(options) {\n",
       "            //Prevent export from breaking\n",
       "            delete options.exporting;\n",
       "            options['exporting'] = {scale: options.scale};\n",
       "\n",
       "            chartContainer.style.height = options.height.toString() + 'px';\n",
       "\n",
       "            if (options.width != 'auto') {\n",
       "                chartContainer.style.width = options.width.toString() + 'px';\n",
       "            }\n",
       "\n",
       "            newChart(options, renderedSeries);\n",
       "\n",
       "        }\n",
       "\n",
       "        function findSeries(series, key) {\n",
       "            return series.findIndex(function (obj) {\n",
       "                return obj.name == key;\n",
       "            })\n",
       "        }\n",
       "\n",
       "        function newChart(options, series) {\n",
       "            //Disable animation\n",
       "            var newOptions = $.extend(options, {series: series});\n",
       "            newOptions.plotOptions['series'] = {animation: false};\n",
       "\n",
       "            //Get zoom\n",
       "            var xExtremes = chart.xAxis[0].getExtremes();\n",
       "\n",
       "            //Re-plot the chart\n",
       "            chart.destroy();\n",
       "            chart = new ChartType(newOptions);\n",
       "\n",
       "            //Reset the zoom\n",
       "            chart.xAxis[0].setExtremes(xExtremes.min, xExtremes.max, false, false);\n",
       "\n",
       "            //Re-draw chart\n",
       "            chart.redraw();\n",
       "        }\n",
       "\n",
       "        function addSeries(key) {\n",
       "            var index = findSeries(series, key);\n",
       "            var newSeries = series[index];\n",
       "            renderedSeries.push(newSeries)\n",
       "        }\n",
       "\n",
       "        function deleteSeries(key) {\n",
       "            var index = findSeries(renderedSeries, key);\n",
       "            renderedSeries.splice(index, 1)\n",
       "        }\n",
       "\n",
       "        function saveSVG(url, name) {\n",
       "            $.ajax({\n",
       "                type: \"POST\",\n",
       "                url: url,\n",
       "                data: JSON.stringify({\n",
       "                    svg: chart.getSVG(),\n",
       "                    name: name\n",
       "                })\n",
       "            });\n",
       "        }\n",
       "\n",
       "        console.log('loaded!', Date());\n",
       "    }\n",
       "\n",
       "});\n",
       "\n",
       "},{}]},{},[1]);\n",
       "</script>\n",
       "\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 92,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "options = {\n",
    "    'chart'   : {'zoomType':'xy'},\n",
    "    'title'   : {'text': '2000-2017年高考数据'},\n",
    "    'subtitle': {'text': 'Source: edu.sina.com.cn'},\n",
    "    'xAxis'   : {'categories': ['2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016','2017']},\n",
    "    'yAxis'   : {'title': {'text': '万人/年'}},\n",
    "#     'plotOptions':{'column':{'dataLabels':{'enable': True,'shadow':True}}}\n",
    "    \n",
    "    }\n",
    "series =  [{\n",
    "    'type': 'column',\n",
    "    'name': '高考人数',\n",
    "    'data': gaokao_num\n",
    "},{\n",
    "    'type': 'column',\n",
    "    'name': '录取人数',\n",
    "    'data': luqu_num\n",
    "# },{\n",
    "#     'type': 'line',\n",
    "#     'name': '录取率',\n",
    "#     'data': luqu_lev,\n",
    "#     'marker':{\n",
    "#         'lineWidth':2,\n",
    "#         'lineColor':'#90ed7d',\n",
    "#         'fillColor':'orange'\n",
    "#     }\n",
    "}\n",
    "]\n",
    "\n",
    "charts.plot(series, options=options, show='inline')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 90,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<style>body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:#555;font-family:sans-serif}\n",
       "small{font-weight:400;display:block;font-size:14px}\n",
       "code{background-color:#d3d3d3;border-radius:3px;font-family:monospace;padding:0 .5em}\n",
       ".icon.-facebook:before,.icon.-linkedin:before,.icon.-pinterest:before,.icon.-twitter:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Post-Creator-Icons;font-style:normal;font-variant:normal;font-weight:400;line-height:1;speak:none;text-transform:none}\n",
       "@font-face{font-family:Post-Creator-Icons;src:url(fonts/Post-Creator-Icons.eot);src:url(fonts/Post-Creator-Icons.eot?#iefix) format('embedded-opentype'),url(fonts/Post-Creator-Icons.woff) format('woff'),url(fonts/Post-Creator-Icons.ttf) format('truetype'),url(fonts/Post-Creator-Icons.svg#Post-Creator-Icons) format('svg');font-weight:400;font-style:normal}\n",
       ".icon.-facebook:before{content:\"\\e001\"}\n",
       ".icon.-linkedin:before{content:\"\\e002\"}\n",
       ".icon.-pinterest:before{content:\"\\e003\"}\n",
       ".icon.-twitter:before{content:\"\\e004\"}\n",
       ".social-icons h4{display:inline-block;margin:20px 10px 0 0}\n",
       ".social-icons .icon{display:inline-block;margin:0 5px}\n",
       "body.modal-open{overflow:hidden}\n",
       ".jsoneditor table,.jsoneditor td,.jsoneditor td.tree,.jsoneditor tr{border:none;margin:0}</style>\n",
       "<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.default.min.css\"/>\n",
       "<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/4.2.0/jsoneditor.min.css\"/>\n",
       "\n",
       "<div class=\"container-fluid\">\n",
       "    <div class=\"row\">\n",
       "        <div class=\"col-sm-10\">\n",
       "            <input type=\"text\" id=\"variable-selector\">\n",
       "        </div>\n",
       "        <div class=\"col-sm-2\">\n",
       "            <button class=\"btn btn-default pull-right\" type=\"submit\" id=\"settings-button\">Settings</button>\n",
       "        </div>\n",
       "    </div>\n",
       "\n",
       "    <div class=\"row\">\n",
       "        <div class=\"collapse col-xs-12\" id=\"settings-collapse\">\n",
       "            <div class=\"panel panel-default\" style=\"margin-top: 20px\">\n",
       "                <div class=\"panel-heading\"><h3 class=\"panel-title\">Adjust chart settings</h3></div>\n",
       "                <div class=\"panel-body\">\n",
       "                    <div class=\"row\">\n",
       "                        <div id=\"jsoneditor\" class=\"col-md-12\" style=\"height: 350px\"></div>\n",
       "                    </div>\n",
       "                    <div class=\"row\" style=\"margin-top: 10px\">\n",
       "                        <div class=\"col-sm-4\">\n",
       "                            <button type=\"button\" class=\"btn btn-primary\" id=\"save-settings\">\n",
       "                                Apply changes\n",
       "                            </button>\n",
       "                        </div>\n",
       "                        <div class=\"col-sm-8 text-right \">\n",
       "                            <form class=\"form-inline\">\n",
       "                                <div class=\"form-group\">\n",
       "                                    <div class=\"input-group\">\n",
       "                                        <input type=\"text\" class=\"form-control\" id=\"options-input\"\n",
       "                                               placeholder=\"settings\" style=\"text-align: right\">\n",
       "                                        <div class=\"input-group-addon\"><strong>.json</strong></div>\n",
       "                                    </div>\n",
       "                                </div>\n",
       "                                <button type=\"submit\" class=\"btn btn-primary\" id=\"options-button\">Save</button>\n",
       "                            </form>\n",
       "\n",
       "                        </div>\n",
       "                    </div>\n",
       "                </div>\n",
       "            </div>\n",
       "        </div>\n",
       "    </div>\n",
       "\n",
       "    <div class=\"row\">\n",
       "        <div id=\"chart-container\" style=\"min-width: 310px;\"></div>\n",
       "    </div>\n",
       "</div>\n",
       "\n",
       "\n",
       "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js\"></script>\n",
       "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.18/require.min.js\"></script>\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "<script>(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require==\"function\"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error(\"Cannot find module '\"+o+\"'\");throw f.code=\"MODULE_NOT_FOUND\",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require==\"function\"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){\n",
       "//findIndex polyfill\n",
       "if (!Array.prototype.findIndex) {\n",
       "    Array.prototype.findIndex = function(predicate) {\n",
       "        if (this == null) {\n",
       "            throw new TypeError('Array.prototype.findIndex called on null or undefined');\n",
       "        }\n",
       "        if (typeof predicate !== 'function') {\n",
       "            throw new TypeError('predicate must be a function');\n",
       "        }\n",
       "        var list = Object(this);\n",
       "        var length = list.length >>> 0;\n",
       "        var thisArg = arguments[1];\n",
       "        var value;\n",
       "\n",
       "        for (var i = 0; i < length; i++) {\n",
       "            value = list[i];\n",
       "            if (predicate.call(thisArg, value, i, list)) {\n",
       "                return i;\n",
       "            }\n",
       "        }\n",
       "        return -1;\n",
       "    };\n",
       "}\n",
       "\n",
       "if (!Array.prototype.filter) {\n",
       "    Array.prototype.filter = function(fun/*, thisArg*/) {\n",
       "        'use strict';\n",
       "\n",
       "        if (this === void 0 || this === null) {\n",
       "            throw new TypeError();\n",
       "        }\n",
       "\n",
       "        var t = Object(this);\n",
       "        var len = t.length >>> 0;\n",
       "        if (typeof fun !== 'function') {\n",
       "            throw new TypeError();\n",
       "        }\n",
       "\n",
       "        var res = [];\n",
       "        var thisArg = arguments.length >= 2 ? arguments[1] : void 0;\n",
       "        for (var i = 0; i < len; i++) {\n",
       "            if (i in t) {\n",
       "                var val = t[i];\n",
       "\n",
       "                // NOTE: Technically this should Object.defineProperty at\n",
       "                //       the next index, as push can be affected by\n",
       "                //       properties on Object.prototype and Array.prototype.\n",
       "                //       But that method's new, and collisions should be\n",
       "                //       rare, so use the more-compatible alternative.\n",
       "                if (fun.call(thisArg, val, i, t)) {\n",
       "                    res.push(val);\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "\n",
       "        return res;\n",
       "    };\n",
       "}\n",
       "\n",
       "function guid() {\n",
       "    function s4() {\n",
       "        return Math.floor((1 + Math.random()) * 0x10000)\n",
       "            .toString(16)\n",
       "            .substring(1);\n",
       "    }\n",
       "    return s4() + s4() + '-' + s4() + '-' + s4() + '-' +\n",
       "        s4() + '-' + s4() + s4() + s4();\n",
       "}\n",
       "\n",
       "Array.prototype.equals = function (array) {\n",
       "    // if the other array is a false value, return\n",
       "    if (!array)\n",
       "        return false;\n",
       "\n",
       "    // compare lengths - can save a lot of time\n",
       "    if (this.length != array.length)\n",
       "        return false;\n",
       "\n",
       "    for (var i = 0, l = this.length; i < l; i++) {\n",
       "        // Check if we have nested arrays\n",
       "        if (this[i] instanceof Array && array[i] instanceof Array) {\n",
       "            // recurse into the nested arrays\n",
       "            if (!this[i].equals(array[i]))\n",
       "                return false;\n",
       "        }\n",
       "        else if (this[i] != array[i]) {\n",
       "            // Warning - two different object instances will never be equal: {x:20} != {x:20}\n",
       "            return false;\n",
       "        }\n",
       "    }\n",
       "    return true;\n",
       "};\n",
       "\n",
       "},{}]},{},[1]);\n",
       "</script>\n",
       "<script>(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require==\"function\"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error(\"Cannot find module '\"+o+\"'\");throw f.code=\"MODULE_NOT_FOUND\",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require==\"function\"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){\n",
       "\n",
       "\n",
       "requirejs.config({\n",
       "    \"paths\": {\n",
       "        \"highstock\": \"https://cdnjs.cloudflare.com/ajax/libs/highstock/2.1.5/highstock\",\n",
       "        \"export\": \"https://cdnjs.cloudflare.com/ajax/libs/highstock/2.1.5/modules/exporting\",\n",
       "        \"more\": \"https://cdnjs.cloudflare.com/ajax/libs/highstock/2.1.7/highcharts-more\",\n",
       "        \"jsoneditor\": \"https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/4.2.0/jsoneditor.min\",\n",
       "        \"selectize\": \"https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.min\",\n",
       "        \"jquery\": \"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min\"\n",
       "    },\n",
       "    \"shim\": {\n",
       "        \"export\": [\"highstock\"],\n",
       "        \"more\": [\"highstock\"]\n",
       "    }\n",
       "});\n",
       "\n",
       "//Define jquery here to use the pre-loaded version\n",
       "define('jquery', [], function() {\n",
       "    return jQuery;\n",
       "});\n",
       "\n",
       "},{}]},{},[1]);\n",
       "</script>\n",
       "<script>(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require==\"function\"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error(\"Cannot find module '\"+o+\"'\");throw f.code=\"MODULE_NOT_FOUND\",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require==\"function\"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){\n",
       "//Count the number of charts on the page\n",
       "if (window.counter == undefined) {\n",
       "    window.counter = 0;\n",
       "} else {\n",
       "    window.counter++;\n",
       "}\n",
       "\n",
       "requirejs([\n",
       "    'jquery',\n",
       "    'selectize',\n",
       "    'jsoneditor',\n",
       "    'highstock',\n",
       "    'export',\n",
       "    'more'\n",
       "], function ($, selectize, JSONEditor) {\n",
       "\n",
       "    function guid() {\n",
       "        function s4() {\n",
       "            return Math.floor((1 + Math.random()) * 0x10000)\n",
       "                .toString(16)\n",
       "                .substring(1);\n",
       "        }\n",
       "\n",
       "        return s4() + s4() + '-' + s4() + '-' + s4() + '-' +\n",
       "            s4() + '-' + s4() + s4() + s4();\n",
       "    }\n",
       "\n",
       "    var id = guid();\n",
       "    plot(id);\n",
       "\n",
       "    function plot(id) {\n",
       "        var series = [\n",
       "            {data: [1, 2, 4, 9], name: \"temperature 1\", display: true, color: '#2b908f'},\n",
       "            {data: [9, 4, 2, 1], name: \"temperature 2\", display: true},\n",
       "            {data: [0, 3, 5, 6], name: \"temperature 3\", display: false}\n",
       "        ];\n",
       "        var series = [{\"marker\": {\"lineWidth\": 2, \"lineColor\": \"#90ed7d\"}, \"type\": \"line\", \"display\": true, \"data\": [59, 59, 63, 62, 61, 57, 57, 56, 57, 62, 69, 72, 75, 76, 74.3, 74.3, 75, 74.46], \"name\": \"\\u5f55\\u53d6\\u7387\"}]\n",
       "        var options = {};\n",
       "        var options = {\"scale\": 2, \"xAxis\": {\"categories\": [\"2000\", \"2001\", \"2002\", \"2003\", \"2004\", \"2005\", \"2006\", \"2007\", \"2008\", \"2009\", \"2010\", \"2011\", \"2012\", \"2013\", \"2014\", \"2015\", \"2016\", \"2017\"]}, \"type\": \"line\", \"yAxis\": {\"title\": {\"text\": \"%\"}}, \"subtitle\": {\"text\": \"Source: edu.sina.com.cn\"}, \"height\": 400, \"width\": \"auto\", \"chart\": {\"zoomType\": \"xy\", \"type\": \"line\"}, \"title\": {\"text\": \"2000-2017\\u5e74\\u9ad8\\u8003\\u6570\\u636e\"}, \"plotOptions\": {\"line\": {\"dataLabels\": {\"enable\": true, \"shadow\": true}}}}\n",
       "        var useHighStock = false;\n",
       "        var useHighStock = false\n",
       "        var save = 'app/chart.svg';\n",
       "        var save = false\n",
       "        var url = 'http://127.0.0.1:65079';\n",
       "        var url = \"http://127.0.0.1:51038/\"\n",
       "        var settingsFile = 'settings';\n",
       "        var settingsFile = \"settings\"\n",
       "        var scale = options.scale;\n",
       "\n",
       "        //Create different containers for the charts\n",
       "        var chartContainer = document.getElementById(\"chart-container\");\n",
       "        chartContainer.id = \"chart-container\" + id;\n",
       "        chartContainer.style.height = options.height.toString() + 'px';\n",
       "\n",
       "        if (options.width != 'auto') {\n",
       "            chartContainer.style.width = options.width.toString() + 'px';\n",
       "        }\n",
       "\n",
       "        var selector = $(\"#variable-selector\");\n",
       "        selector.attr('id', \"variable-selector\" + id);\n",
       "\n",
       "        var settings = $(\"#settings-collapse\");\n",
       "        settings.attr('id', \"settings-collapse\" + id);\n",
       "\n",
       "        var button = $(\"#settings-button\");\n",
       "        button.attr('id', \"settings-button\" + id);\n",
       "\n",
       "        var saveButton = $(\"#save-settings\");\n",
       "        saveButton.attr('id', \"save-settings\" + id);\n",
       "\n",
       "        var optionsInput = $(\"#options-input\");\n",
       "        optionsInput.attr('id', \"options-input\" + id);\n",
       "        optionsInput.val(settingsFile);\n",
       "\n",
       "        var optionsButton = $(\"#options-button\");\n",
       "        optionsButton.attr('id', \"options-button\" + id);\n",
       "\n",
       "        // create the editor\n",
       "        var editorContainer = document.getElementById(\"jsoneditor\");\n",
       "        editorContainer.id = \"jsoneditor\" + id;\n",
       "        var editor = new JSONEditor(editorContainer);\n",
       "\n",
       "        button.on('click', showSettings);\n",
       "        saveButton.on('click', applyOptions);\n",
       "        optionsButton.on('click', saveOptions);\n",
       "\n",
       "        function applyOptions() {\n",
       "            var newOptions = editor.get();\n",
       "            setOptions(newOptions);\n",
       "            settings.collapse('hide');\n",
       "        }\n",
       "\n",
       "        function saveOptions(event) {\n",
       "            event.preventDefault();\n",
       "\n",
       "            applyOptions();\n",
       "\n",
       "            var options = chart.options;\n",
       "            delete options.exporting;\n",
       "\n",
       "            var name = optionsInput.val() ? optionsInput.val() + '.json' : 'settings.json';\n",
       "\n",
       "            options['settingsFile'] = name;\n",
       "\n",
       "            $.ajax({\n",
       "                type: \"POST\",\n",
       "                url: url,\n",
       "                data: JSON.stringify({\n",
       "                    options: options,\n",
       "                    name: name\n",
       "                })\n",
       "            });\n",
       "        }\n",
       "\n",
       "        function showSettings() {\n",
       "            settings.collapse('toggle');\n",
       "        }\n",
       "\n",
       "        //Choose a chart type\n",
       "        var ChartType = useHighStock ? Highcharts.StockChart : Highcharts.Chart;\n",
       "\n",
       "        //Default highchart colors\n",
       "        var colors = ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9',\n",
       "            '#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1'];\n",
       "\n",
       "        series.map(function (serie, index) {\n",
       "            if (!serie.color) {\n",
       "                serie['color'] = colors[index % 10];\n",
       "            }\n",
       "\n",
       "            return serie;\n",
       "        });\n",
       "\n",
       "        //Get all the keys\n",
       "        var keys = [];\n",
       "        var initialKeys = [];\n",
       "        $.each(series, function (index, serie) {\n",
       "            keys.push({\n",
       "                display: serie.display,\n",
       "                value: serie.name,\n",
       "                text: serie.name\n",
       "            });\n",
       "\n",
       "            if (serie.display) {\n",
       "                initialKeys.push(serie.name)\n",
       "            }\n",
       "        });\n",
       "\n",
       "        selector.selectize({\n",
       "            plugins: ['remove_button', 'restore_on_backspace'],\n",
       "            delimiter: ',',\n",
       "            options: keys,\n",
       "            items: initialKeys,\n",
       "            onItemAdd: function (key) {\n",
       "                console.log('series added');\n",
       "                addSeries(key);\n",
       "                newChart(chart.options, renderedSeries);\n",
       "            },\n",
       "            onItemRemove: function (key) {\n",
       "                console.log('series removed');\n",
       "                deleteSeries(key);\n",
       "                newChart(chart.options, renderedSeries);\n",
       "            }\n",
       "        });\n",
       "\n",
       "        //Set initial chart options\n",
       "        var chartOptions;\n",
       "        if (typeof options.chart === \"undefined\") {\n",
       "            chartOptions = {renderTo: chartContainer.id};\n",
       "        } else {\n",
       "            chartOptions = $.extend(options[\"chart\"], {renderTo: chartContainer.id});\n",
       "        }\n",
       "\n",
       "        //Initial rendered series\n",
       "        var renderedSeries = [];\n",
       "        options = $.extend(options, {chart: chartOptions}, {series: renderedSeries});\n",
       "        var chart = new ChartType(options);\n",
       "\n",
       "        $.each(initialKeys, function (index, key) {\n",
       "            addSeries(key);\n",
       "        });\n",
       "\n",
       "        newChart(chart.options, renderedSeries);\n",
       "        editor.set(chart.options);\n",
       "\n",
       "        if (save) {\n",
       "            saveSVG(url, save)\n",
       "        }\n",
       "\n",
       "        function setOptions(options) {\n",
       "            //Prevent export from breaking\n",
       "            delete options.exporting;\n",
       "            options['exporting'] = {scale: options.scale};\n",
       "\n",
       "            chartContainer.style.height = options.height.toString() + 'px';\n",
       "\n",
       "            if (options.width != 'auto') {\n",
       "                chartContainer.style.width = options.width.toString() + 'px';\n",
       "            }\n",
       "\n",
       "            newChart(options, renderedSeries);\n",
       "\n",
       "        }\n",
       "\n",
       "        function findSeries(series, key) {\n",
       "            return series.findIndex(function (obj) {\n",
       "                return obj.name == key;\n",
       "            })\n",
       "        }\n",
       "\n",
       "        function newChart(options, series) {\n",
       "            //Disable animation\n",
       "            var newOptions = $.extend(options, {series: series});\n",
       "            newOptions.plotOptions['series'] = {animation: false};\n",
       "\n",
       "            //Get zoom\n",
       "            var xExtremes = chart.xAxis[0].getExtremes();\n",
       "\n",
       "            //Re-plot the chart\n",
       "            chart.destroy();\n",
       "            chart = new ChartType(newOptions);\n",
       "\n",
       "            //Reset the zoom\n",
       "            chart.xAxis[0].setExtremes(xExtremes.min, xExtremes.max, false, false);\n",
       "\n",
       "            //Re-draw chart\n",
       "            chart.redraw();\n",
       "        }\n",
       "\n",
       "        function addSeries(key) {\n",
       "            var index = findSeries(series, key);\n",
       "            var newSeries = series[index];\n",
       "            renderedSeries.push(newSeries)\n",
       "        }\n",
       "\n",
       "        function deleteSeries(key) {\n",
       "            var index = findSeries(renderedSeries, key);\n",
       "            renderedSeries.splice(index, 1)\n",
       "        }\n",
       "\n",
       "        function saveSVG(url, name) {\n",
       "            $.ajax({\n",
       "                type: \"POST\",\n",
       "                url: url,\n",
       "                data: JSON.stringify({\n",
       "                    svg: chart.getSVG(),\n",
       "                    name: name\n",
       "                })\n",
       "            });\n",
       "        }\n",
       "\n",
       "        console.log('loaded!', Date());\n",
       "    }\n",
       "\n",
       "});\n",
       "\n",
       "},{}]},{},[1]);\n",
       "</script>\n",
       "\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 90,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "options = {\n",
    "    'chart'   : {'zoomType':'xy'},\n",
    "    'title'   : {'text': '2000-2017年高考数据'},\n",
    "    'subtitle': {'text': 'Source: edu.sina.com.cn'},\n",
    "    'xAxis'   : {'categories': ['2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016','2017']},\n",
    "    'yAxis'   : {'title': {'text': '%'}},\n",
    "    'plotOptions':{'line':{'dataLabels':{'enable': True,'shadow':True}}}\n",
    "    \n",
    "    }\n",
    "series =  [{\n",
    "    'type': 'line',\n",
    "    'name': '录取率',\n",
    "    'data': luqu_lev,\n",
    "    'marker':{\n",
    "        'lineWidth':2,\n",
    "        'lineColor':'#90ed7d',\n",
    "#         'fillColor':'orange'\n",
    "    }\n",
    "}\n",
    "]\n",
    "\n",
    "charts.plot(series, options=options, show='inline')"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.5.4"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
